<template>
  <div>
    <button-tab :line-width="3" :animate="false" v-model="currentTab">
      <button-tab-item @on-item-click="onItemClick1(1)" selected>待同意</button-tab-item>
      <button-tab-item @on-item-click="onItemClick2(0)">已完成</button-tab-item>
    </button-tab>
    <div>
      <loading :show="loadingShow"></loading>
      <div v-if="reservationList.length > 0">
        <!-- 待同意 -->
        <div class="reservationList0" v-if="currentTab===0">
          <div v-for="(item,index) in reservationList" :key="index">
            <reservationList-item :items="item" :status="0" @getData="onItemClick2" :newstatus="0"></reservationList-item>
          </div>
        </div>
        <!-- 已完成： 4种状态；预约成功 预约过期 租户取消 房东取消  -->
        <div class="reservationList1" v-if="currentTab===1">
          <div v-for="(item,index) in reservationList" :key="index">
            <reservationList-item :items="item" :status="item.status" :newstatus="1"></reservationList-item>
          </div>
        </div>
      </div>
      <!--无数据-->
      <no-data v-else><span slot="message">您还没有预约信息哦~</span></no-data>
    </div>
  </div>
</template>
<script>
  import { Loading } from 'vux'
  import reservationListItem from '@/views/houseManage/child/reservationListItem'
  import noData from '@/components/noData'
  export default {
    components: {
      reservationListItem,
      noData,
      Loading
    },
    created () {
      this.getData('1')
    },
    data () {
      return {
        loadingShow: false,
        currentTab: 0,
        reservationList: []
      }
    },
    methods: {
       // 待同意
      onItemClick1 (value) {
        this.$vux.loading.show({
          text: 'Loading'
        })
        this.currentTab = 0
        this.getData(value)
      },
      // 已完成
      onItemClick2 (value) {
        this.$vux.loading.show({
          text: 'Loading'
        })
        this.currentTab = 1
        this.getData(value)
      },
       // 获取列表数据
      getData (status) {
        let id = JSON.parse(localStorage.getItem('userInfo')).id
        this.$axiosPosting(this.$api.renterAppointmentList, {
          userId: id,
          page: 1,
          pageSize: 1000,
          status: status
        }).then(res => {
          if (res.code === '0000') {
            this.$vux.loading.hide()
            this.msg = ''
            this.reservationList = res.data ? res.data : []
            this.$nextTick(() => {
              this.dataUpdated = true
            })
          }
        })
      }
    }
  }
</script>
<style lang="less">
.vux-button-group {
  padding: 0 15px;
  margin-bottom: 0;
}
.render__contract__dialog {
  .weui-dialog {
    width: 98vw !important;
    max-width: 100vw!important;
    height: 100%;
    overflow: scroll !important;
    max-width: 100;

  }
}
.vux-button-group{
  padding:0 15px;
}
.vux-button-group > a.vux-button-tab-item-first {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.vux-button-group > a.vux-button-tab-item-last:after {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 1px solid #d0d0d0;
}
.vux-button-group > a.vux-button-tab-item-last{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.vux-button-group > a.vux-button-tab-item-first:after {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border: 1px solid #d0d0d0;
}
.vux-button-group > a.vux-button-tab-item-middle:after{
  border-left:none!important; 
  border-right:none!important;
}
.vux-button-group > a.vux-button-tab-item-middle:after {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border: 1px solid #d0d0d0;
}
</style>
